<template>
  <div class="registerContainer">
    <!-- 头部 -->
    <div class="logoWrap">
      <img
        class="image"
        src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
      />
    </div>
    <!-- 中间 -->
    <div class="registerCenter">
      <!-- <i class="iconfont icon-shouji"></i> -->
      <div class="phone">
        <van-button type="danger" block @click="handleRegister">手机号快速登录</van-button>
      </div>
      <div class="email">
        <van-button plain hairline type="danger" block
          >邮箱号快速登录</van-button
        >
      </div>
    </div>
    <!-- 底部 -->
    <div class="thirdWrap">
      <div class="thirdList">
        <span class="thirdItem">
          <i class="iconfont icon-weixin"></i>
          <span class="name">微信</span>
        </span>
      </div>
      <div class="thirdList">
        <span class="thirdItem">
          <i class="iconfont icon-QQ"></i>
          <span class="name">QQ</span>
        </span>
      </div>
      <div class="thirdList weibo">
        <span class="thirdItem">
          <i class="iconfont icon-weibo"></i>
          <span class="name">微博</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data(){
    return {

    }
  },
  methods:{
    handleRegister(){
      this.$router.push('/login')
    }
  }
};
</script>

<style lang="less" scoped>
.registerContainer {
  height: 100%;
  background: #f2f5f4;
  .logoWrap {
    text-align: center;
    padding-top: 100px;
    .image {
      width: 134px;
      height: 42px;
    }
  }
  .registerCenter {
    margin: 20px;
    .phone {
      margin-bottom: 20px;
    }
    .email {
      margin-bottom: 20px;
    }
  }
  .thirdWrap {
    position: absolute;
    left: 0;
    bottom: 40px;
    height: 20px;
    width: 100%;
    text-align: center;
    .thirdList {
      height: 20px;
      border-right: 1px solid #979797;
      display: inline-block;
      text-align: center;
      padding: 10px 10px;
      font-size: 16px;
      color: #979797;
      &.weibo {
        border-right: none;
      }
      .thirdItem {
        position: relative;
        height: 16px;
        top: -14px;
        i {
          position: relative;
          top: 1px;
          width: 20px;
          height: 20px;
          display: inline-block;
          font-size: 20px;
          color: #979797;
        }
      }
    }
  }
}
</style>